<template>
	<view class="container">
		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" back-icon-name="arrow-leftward" title="注册"
			:background="{ background: '#fff' }" title-color="#000000">

		</u-navbar>

		<view class="form">
			<u-form :model="form" ref="uForm" >
				<view class="test">
					<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="none"
						 label="" prop="phone" label-width="150" >
						<u-input  placeholder="*用户名（字母加数字组合）" v-model="form.name"  ></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="none"
						 label="" prop="phone" label-width="150" >
						<u-input  placeholder="*密码" v-model="form.pwd"  ></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="none"
						 label="" prop="phone" label-width="150" >
						<u-input  placeholder="*确认密码" v-model="form.rpwd"  ></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="none"
						 label="" prop="phone" label-width="150" >
						<u-input  placeholder="*真实姓名" v-model="form.realname"  ></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="none"
						 label="" prop="phone" label-width="150" >
						<u-input  placeholder="*邮箱" v-model="form.email" type='email' ></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="none"
						 label="" prop="phone" label-width="150" >
						<u-input  placeholder="*手机号" v-model="form.phone"  ></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="none"
						 label="" prop="phone" label-width="150" >
						<u-input  placeholder="邀请码（选填）" v-model="form.invitecode"  ></u-input>
					</u-form-item>
          <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="none"
						 label="" prop="phone" label-width="150" >
						<u-input  placeholder="手机验证码" v-model="form.code"  ></u-input>
            <u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
					</u-form-item>
				</view>
			</u-form>
			<u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle1" @click="submit">登录</u-button>
      <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</view>
		<view class="content">
				<navigator url="/pages/account/register" hover-class="none" class="change">没有账号？点击注册</navigator>
		</view>
		<!--  -->
	</view>
</template>

<script>
export default {
  data () {
    return {
      form:{

				},
				customStyle1:{
          margin:'20rpx 0',
          fontWeight: 'bold',
          color: '#FFFFFF',
          background:'#1488FF'
        },
        codeTips: '',
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    // 获取验证码
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
      codeChange(text) {
        this.codeTips = text;
      },
  }
}

</script>
<style lang='scss' scoped>
.container {
		color: aliceblue;
		min-height: 100vh;
		background-color: #fff;
		.form {
				padding: 30rpx;
		}
}
</style>